<template>
	<view class="page">
		<view class="header">
			<image @click="back" src="/static/image/login/left.png" mode=""></image>
			<text>我的分享</text>
		</view>
		<view style="height: 176rpx;">

		</view>
		<scroll-view scroll-y>
			<view class="cont">

				<div v-for="(item, index) in contentList" :key="index">

					<div class="box" v-if="item.type == 1">
						<div class="toptips">
							<text>地点：7个</text>
							<text>步行：2h35min</text>
							<text>车程：1h50min</text>
						</div>

						<div class="tipbox">
							<qianStep v-if="options.length > 0" :options='options'>
								<template v-slot:left='{index}'>
									<view class="step_circle2"></view>
									<view class="step_line" v-if="index != options.length-1"></view>
								</template>
								<template v-slot:right='{item}'>
									<view class="setp_time" style="font-size:26rpx;">
										<text>{{item.time}}</text>
										<text style="margin-left: 12rpx;">{{item.content}}</text>
									</view>

								</template>
							</qianStep>
							<div v-else class="nodata">
								<image src="../../static/image/home/home-nodata.png" mode=""></image>
								<text>躺平中～暂无行程</text>
							</div>
							<image @click="handleMore" class="more" src="/static/image/home/more.png" mode=""></image>
							<div class="operate">
								<image @click="openShare" src="/static/image/home/share.png" mode=""></image>
								<text class="line"></text>
								<image src="/static/image/home/clock.png" mode=""></image>
								<text class="line"></text>
								<image src="/static/image/home/map.png" mode=""></image>
							</div>
						</div>
					</div>

					<div class="showcontentitem" v-if="item.type == 0">
						<image class="left" :src="item.src" mode=""></image>
						<div class="right">
							<text class="title">
								{{item.title}}
							</text>
							<div class="subtitle">
								<text v-for="(itm) in item.list.slice(0, 3)">{{itm}}</text>
							</div>

							<div class="operatecontent">
								<image v-if="!item.isstar" class="love" src="../../static/image/home/love.png" mode="">
								</image>
								<image v-else class="love" src="../../static/image/home/loveactive.png" mode=""></image>

								<image v-if="!item.iscollect" class="star" src="../../static/image/home/star.png"
									mode=""></image>
								<image v-else class="star" src="../../static/image/home/staractive.png" mode=""></image>

								<image class="fenxiang" src="../../static/image/home/fenxiang.png" mode=""></image>
							</div>
						</div>
					</div>



				</div>


				<!-- 		<view class="item">
					<text class="left">头像</text>
					<view class="right">
						<text></text>
						<image class="avator" src="/static/image/home/avator.png" mode=""></image>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<text class="left">昵称</text>
					<view class="right">
						<text>Franklin Ryan</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<text class="left">性别</text>
					<view class="right">
						<text>男</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<text class="left">生日</text>
					<view class="right">
						<text>1990-02-22</text>
						<image class="btn" src="/static/image/mine/right.png" mode=""></image>
					</view>
				</view> -->
				<!-- 				<view class="firsttitle">
					<text class="aaa">* </text>
					<text class="bbb">问题和意见</text>
				</view>
				<view class="textarea1">
					<textarea v-model="suggest"
					class=""
					 placeholder="请输入您的需求或者意见（如获取验证码失败，请填写当前注册的手机号码）"
					 placeholder-class="textareaplaceholder"
					 />
				</view>
				<view class="subtitle">
					<text>联系方式</text>
				</view>
				<view class="textarea2">
					<input type="text" @input="handleConcat" placeholder="请输入您的电子邮箱或手机号，以便回复" />
				</view> -->
				<!-- <button>提交</button> -->
			</view>
			<!-- 			<view class="content">
				<view class="content-top">
					<view class="content-top-one">
						<image src="/static/image/travel/position.png" mode=""></image>
						<text>{{locationData.title}}</text>
					</view>
					<text class="content-top-two">{{locationData.desc}}</text>
				</view>
				<view v-if="step == 1" class="content-comment">
					<view class="comment-clock">
						<text class="comment-clock-left">共有{{locationData.count}}人打卡</text>
						<view @click="daka" class="comment-clock-right">
							<image src="/static/image/travel/clockin.png" mode=""></image>
							<text>打卡</text>
						</view>
					</view>
					<view class="commentbox">
						<view class="commentboxitem" v-for="(item, index) in list" :key="index">
							<view class="top">
								<image :src="item.src" mode=""></image>
								<text>{{item.name}}</text>
							</view>
							<view class="middle">
								<text >
									{{item.desc}}
								</text>
							</view>
							<view class="end">
								<image v-for="(itm, idx) in item.poster" :key="idx"
								:src="itm" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="daka">
					<text class="dakatitle">打卡信息</text>
					<view class="textarea11">
						<textarea v-model="txt"
						class=""
						 placeholder="请在此处输入文字信息"
						 placeholder-class="textareaplaceholder"
						 />
					</view>
					
					<view class="imgoperate">
						<view class="img" v-for="(itm, idx) in showImg"  :key="idx">
							<image :src="itm" mode=""></image>
						</view>
						
						<image class="add" @click="add" src="/static/image/travel/addpic.png" mode=""></image>
					</view>
					
					<button class="btn">打卡</button>
				</view>

			</view> -->
		</scroll-view>
		<view class="" style="height: 190rpx;">
		</view>
		<tabbar selected="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	import people from '../../static/image/travel/people.png'
	import listItem from '../../static/image/travel/list-item.png'
	import poster from '../../static/image/home/poster.png'
	import qianStep from '../../components/ly-step/ly-step.vue'
	export default {
		components: {
			tabbar: tabbar,
			qianStep
		},
		data() {
			return {
				active: 0,
				suggest: '',
				concat: '',
				txt: '',
				showImg: [people],
				step: 2, // 1列表 2添加
				locationData: {
					title: '冰心故居',
					desc: '福建省福州市鼓楼区杨桥东路17号',
					count: 2334,

				},
				list: [{
						name: '岩瑶妹',
						src: people,
						desc: '在项目伊始时做一个用户研究的作用好过于在项目落地后再对50个用户进行测试',
						poster: [
							listItem, listItem, listItem
						]
					},
					{
						name: 'Chad Ortiz',
						src: people,
						desc: '有功无过是短暂的，无功有过是行不通的，有功有过是最好的',
						poster: [
							listItem, listItem, listItem, listItem, listItem,
						]
					},
					{
						name: 'Margaret Owen',
						src: people,
						desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
						poster: [
							listItem, listItem, listItem, listItem
						]
					},
					{
						name: 'Ruby Pena',
						src: people,
						desc: '不要在你家里放一件你不知其用，或你认为不美的东西',
						poster: [
							listItem,
						]
					}
				],
				contentList: [{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
					{
						type: 1,
						place: '7个',
						walk: '2h35min',
						car: '1h50min',
						list: [{
								content: '进贤门',
								time: '08:00-09:00',
							},
							{
								content: '揭阳学宫',
								time: '09:00-12:00',
							},
							{
								content: '罗家老字号青果汁',
								time: '12:00-14:00',
							},
						]
					},
					{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: false,
					},
					{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: false,
						iscollect: true,
					},
					{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: false,
						iscollect: false,
					}
				],
				hasMore: true,
				options: [{
						content: '进贤门',
						time: '08:00-09:00',
					},
					{
						content: '揭阳学宫',
						time: '09:00-12:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
					{
						content: '罗家老字号青果汁',
						time: '12:00-14:00',
					},
				],
			}
		},
		methods: {

			openShare() {
				uni.navigateTo({
					url: '/pages/sharePage/sharePage'
				})
			},
			handleConcat(event) {
				this.suggest = event.target.detail
			},
			back() {
				uni.navigateBack()
			},
			daka() {
				this.step = 2
			},
			add() {
				uni.chooseImage({
					count: 5, // 默认9, 设置图片的最大选择数，设置为1表示只选择一张图片
					sourceType: ['camera'], // 可选前置或后置，默认['album', 'camera']
					success: (res) => {
						this.showImg = res.tempFilePaths || []; // 获取选中的文件列表，取第一张图片的路径
					},
					fail: (err) => {
						console.error('调用图片失败', err);
					}
				});
			},
			handleMore() {
				// this.options = [
				// 	...this.options,
				// 	{
				// 	  content: '进贤门',
				// 	  time: '08:00-09:00',
				// 	},
				// 	{
				// 	  content: '揭阳学宫',
				// 	  time: '09:00-12:00',
				// 	},
				// 	{
				// 	  content: '罗家老字号青果汁',
				// 	  time: '12:00-14:00',
				// 	},
				// 	{
				// 	  content: '罗家老字号青果汁',
				// 	  time: '12:00-14:00',
				// 	},
				// ]
				// this.hasMore = false

			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background: #EEF0F4;
		min-height: 100%;
		display: flex;
		flex-direction: column;

		.header {
			height: 176rpx;
			background-color: #fff;
			// padding-top: 108rpx;
			display: flex;
			justify-content: center;
			// align-items: center;
			position: fixed;
			width: 100%;
			z-index: 3;

			image {
				position: absolute;
				left: 32rpx;
				bottom: 24rpx;
				width: 34rpx;
				height: 34rpx;
			}

			text {
				position: absolute;
				bottom: 16rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #221715;
				line-height: 51rpx;
			}
		}

		.content {
			flex: 1;
			margin: 20rpx;
			// padding-top: 176rpx;
			background-color: #FFF;

			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;

			.content-top {
				padding: 30rpx 30rpx 30rpx 30rpx;
				border-bottom: 2rpx solid #F3F5F7;

				.content-top-one {
					display: flex;
					align-items: center;
					height: 48rpx;

					image {
						width: 46rpx;
						height: 40rpx;
						margin-left: 6rpx;
						margin-bottom: 20rpx;
					}

					text {
						font-weight: 500;
						font-size: 34rpx;
						color: #221715;
						line-height: 48rpx;
						margin-left: 16rpx;
					}
				}

				.content-top-two {
					font-weight: 400;
					font-size: 28rpx;
					color: #777777;
					line-height: 40rpx;

				}
			}

			.content-comment {
				padding: 36rpx 30rpx;

				.comment-clock {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.comment-clock-left {
						font-weight: bold;
						font-size: 30rpx;
						color: #1A1A1A;
						line-height: 42rpx;
					}

					.comment-clock-right {
						width: 144rpx;
						height: 56rpx;
						background: linear-gradient(270deg, #0187F5 0%, #2DCCC2 100%);
						border-radius: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							margin-left: 14rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
						}
					}
				}

				.commentbox {
					.commentboxitem {
						margin-bottom: 20rpx;
						border-bottom: 2rpx solid #F3F5F7;
						;

						.top {
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;

							image {
								width: 48rpx;
								height: 48rpx;
								border-radius: 16rpx;
								margin-right: 16rpx;
							}

							text {
								font-weight: 400;
								font-size: 28rpx;
								color: #1A1A1A;
								line-height: 40rpx;
							}
						}

						.middle {
							margin-bottom: 20rpx;

							text {
								font-weight: 400;
								font-size: 28rpx;
								color: #595959;
								line-height: 40rpx;
							}
						}

						.end {
							margin-bottom: 20rpx;

							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 8rpx;
								margin-right: 16rpx;
							}
						}
					}
				}
			}

			.daka {
				padding: 36rpx 30rpx;

				.dakatitle {
					font-weight: 500;
					font-size: 30rpx;
					color: #1A1A1A;
					line-height: 42rpx;
					margin-bottom: 20rpx;
				}

				.textarea11 {
					// width: 80%;
					margin-bottom: 20rpx;
					border-radius: 16rpx;
					// width: 400rpx;
					// height: 200rpx;
					background: #F5F7F9;

					// padding: 20rpx;\
					textarea {
						padding: 20rpx;
						font-size: 28rpx;
						line-height: 40rpx;
					}
				}

				.textareaplaceholder {
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					// padding: 20rpx;
				}

				.imgoperate {
					display: flex;
					margin-bottom: 80rpx;

					.img {
						width: 140rpx;
						height: 140rpx;
						margin-right: 24rpx;

						image {
							width: 140rpx;
							height: 140rpx;
						}
					}

					.add {
						width: 140rpx;
						height: 140rpx;
					}
				}

				.btn {
					margin-top: 80rpx;
					margin: 0 20rpx;
					height: 88rpx;
					background: #006FF6;
					border-radius: 44rpx;
				}
			}
		}
	}

	.cont {
		// width: 710rpx;
		margin: 20rpx;
		// height: 682rpx;
		// background: #FFFFFF;
		// border-radius: 16rpx;
		padding: 30rpx;

		.firsttitle {

			margin-bottom: 20rpx;

			.aaa {
				font-weight: bold;
				font-size: 30rpx;
				color: #E80000;
				line-height: 42rpx;
				padding-right: 10rpx;
				padding-top: 10rpx;
			}

			.bbb {
				font-weight: bold;
				color: #1A1A1A;
				font-size: 30rpx;
				line-height: 42rpx;
			}
		}

		.textarea1 {
			// width: 650rpx;
			height: 200rpx;
			background: #F5F7F9;
			border-radius: 16rpx;
			margin-bottom: 30rpx;

			// padding: 20rpx;\
			textarea {
				padding: 20rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}

		.subtitle {
			margin-bottom: 20rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #1A1A1A;
			line-height: 42rpx;
		}

		.textarea2 {
			margin-bottom: 80rpx;
			// width: 650rpx;
			height: 100rpx;
			background: #F5F7F9;
			border-radius: 16rpx;

			input {
				padding: 20rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}

		// button {
		// 	// width: 650rpx;
		// 	height: 88rpx;
		// 	background: #006FF6;
		// 	border-radius: 44rpx;

		// 	font-weight: bold;
		// 	font-size: 30rpx;
		// 	color: #FFFFFF;
		// 	line-height: 42rpx;
		// 	display: flex;
		// 	justify-content: center;
		// 	align-items: center;
		// }


		.item {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F3F5F7;

			.left {
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}

			.right {
				display: flex;
				// align-items: center;
				align-items: start;

				text {
					font-size: 28rpx;
					color: #1A1A1A;
					line-height: 40rpx;
				}

				.avator {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.btn {
					width: 40rpx;
					height: 40rpx;
				}

			}

		}

		button {
			height: 88rpx;
			background: #006FF6;
			border-radius: 44rpx;

			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 80rpx;
		}
	}


	.showcontentitem {
		background-color: #fff;
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		// padding-bottom: 30rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		border-bottom: 2rpx solid #F3F5F7;

		.left {
			width: 240rpx;
			height: 240rpx;
			margin-right: 20rpx;
			border-radius: 16rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;

			.title {
				color: #221715;
				font-size: 28rpx;
				line-height: 40rpx;
				// margin-right: 20rpx;
			}

			.subtitle {
				display: flex;
				flex-direction: column;
				color: #777777;
				font-size: 28rpx;
				line-height: 40rpx;
				margin-top: 20rpx;
			}

			.operatecontent {
				position: absolute;
				top: 30rpx;
				right: 20rpx;
				display: flex;
				align-items: center;

				.love {
					width: 26rpx;
					height: 26rpx;
					margin-right: 22rpx;
				}

				.star {
					width: 28rpx;
					height: 26rpx;
					margin-right: 18rpx;
				}

				.fenxiang {
					width: 32rpx;
					height: 26rpx;
				}
			}
		}
	}


	.tipbox {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		position: relative;
		z-index: 1;
		// top: -12rpx;

		min-height: 510rpx;
		margin: 0 20rpx 20rpx;
		// margin-top: -10rpx;
		padding: 40rpx 42rpx 0 42rpx;
		// background-color: #FFFFFF;
		background-color: #F5F7F9;
		// background-color: red;

		border-radius: 0rpx 0rpx 16rpx 16rpx;

		.nodata {
			display: flex;
			flex-direction: column;

			image {
				width: 416rpx;
				height: 346rpx;
				margin: 0 auto;
				margin-top: 22rpx;
				margin-bottom: 32rpx;
			}

			text {
				margin: 0 auto;
				color: #999999;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}

		.more {
			width: 24rpx;
			height: 22rpx;
			position: absolute;
			left: 50%;
			bottom: 20rpx;
			margin-left: -12rpx;
			border: 2rpx solid #D9DFE6;
		}

		.operate {
			width: 72rpx;
			height: 268rpx;
			background: #F5F7F9;
			border-radius: 36rpx;
			position: absolute;
			right: 22rpx;
			bottom: 20rpx;
			display: flex;
			padding: 16rpx 0;
			flex-direction: column;
			// align-items: s;
			align-items: center;
			justify-content: space-around;
			border: 2rpx solid #D9DFE6;

			image {
				cursor: pointer;
				width: 36rpx;
				height: 36rpx;
				// width: auto;
				// min-height: 36rpx;
			}

			.line {
				width: 48rpx;
				height: 1rpx;
				background-color: #E5E5E5;
			}
		}
	}


	.step_circle2 {
		width: 18rpx;
		height: 18rpx;
		background: #FFFFFF;
		border: 2rpx solid #1076F2;
		border-radius: 50%;
		margin-left: 9rpx;
	}

	.step_line {
		width: 2rpx;
		height: 200%;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		flex: 1;
		border-left: 1rpx dotted #D9DFE6;
	}

	.setp_time {
		// color: #777777;
		color: #1A1A1A;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.setp_content {
		color: #080808;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.box {
		background-color: #fff;
		padding: 0;
		padding-bottom: 30rpx;

		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.toptips {
		background: linear-gradient(270deg, #0187F5 0%, #2DCCC2 100%);
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		height: 80rpx;
		padding-bottom: 6rpx;
		padding-left: 20rpx;
		display: flex;
		align-items: center;

		// margin: 0 20rpx;
		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-right: 32rpx;
		}
	}
</style>